<template>
    <div class="commodity-reviews">
      <p class="title">评价</p>
        <div class="commodity-score clearfix">
            <div class="score-left">
                <h1><span>5</span>分</h1>
                <p> <Rate disabled v-model="valueDisabled" /></p>
                <p>共<span>916</span>人评价</p>
            </div>
            <div class="score-center">
              <p>手术效果 <Rate disabled v-model="valueDisabled" /></p>
              <p>服务满意度 <Rate disabled v-model="valueDisabled" /></p>
              <p>医生评价 <Rate disabled v-model="valueDisabled" /></p>
            </div>
            <div class="score-right">
                <p>口碑均来自红粉整形平台预订本服务的的用户</p>
            </div>
        </div>
        <div class="commodity-radio">
            <RadioGroup v-model="animal">
                <Radio label="全部"></Radio>
                <Radio label="图片"></Radio>
                <Radio label="视频"></Radio>
                <Radio label="追评"></Radio>
                <Radio label="好评"></Radio>
                <Radio label="中评"></Radio>
                <Radio label="差评"></Radio>
            </RadioGroup>
            <Dropdown>
                <a href="javascript:void(0)">
                   时间排序
                    <Icon type="ios-arrow-down"></Icon>
                </a>
                <DropdownMenu slot="list">
                    <DropdownItem>好评排序</DropdownItem>
                    <DropdownItem>好评排序</DropdownItem>
                </DropdownMenu>
            </Dropdown>
        </div>
        <commodity-comment :evaluate="evaluate" :sauts="sauts"></commodity-comment>
        <div class="xiangm">
            <p class="title"><span>你可以对以下项目感兴趣</span> <span class="more">更多>></span></p>
            <product-Reservation :width="width1"  :movieList="navList"></product-Reservation>
        </div>
    </div>
</template>

<script>
    import CommodityComment from '../../../components/Comment/CommodityComment'
    import productReservation from '../../ProductReservation/index.vue'
    export default {
        name: "CommodityReviews",
        props: ['navList', 'width1','evaluate','sauts'],
        components:{
            CommodityComment,
            productReservation
        },
        data () {
            return {
                valueDisabled:2,
                animal: '全部'
            }
        }
    }
</script>

<style scoped lang="less">
    @import "../../../style/style";
    .commodity-score{
        padding: 20px;
        >div{
            width: 315px;
            text-align: center;
            float: left;
        }
        .score-center{
            border-left:1px solid #f8f8f8;
            border-right:1px solid #f8f8f8;
        }
        .score-left{
            width: 250px;
            >h1{
                font-size: 16px;
                color: #666666;
                span{
                    font-size: 32px;
                    color: @theme-color-dark;
                    margin-right: 6px;
                }
            }
            p{
                span{
                    color: @theme-color-dark;
                }
            }
        }
        .score-right{
            line-height: 100px;
            p{
                color: #999999;
                font-size: 12px;
            }
        }
    }
    .commodity-radio{
        padding: 15px 0 15px 50px;
        background-color: #fafafa;
        border: solid 1px #f0f0f0;
        .ivu-radio-wrapper{
            margin-right: 20px;
        }
        .ivu-dropdown{
            float: right;
            margin-right: 20px;
        }
    }
    .title{
        border-bottom: 2px solid @theme-color-dark;
        color: @theme-color-dark;
        font-size: 16px;
        padding-top: 20px;
        padding-bottom: 10px;
        span{
            vertical-align: top;
        }
        img{
            margin-top: 3px;
            margin-right: 10px;
        }
    }
    .more{
        float: right;
    }
</style>